<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="box">box标签</div>
<div class="wrap">
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
</div>

<input type="text" class="user">
<select class="sex">
    <option value="0">女</option>
    <option value="1">男</option>
</select>


<script>
// 非表单元素：div p h2 a span em strong ...
// 表单元素：input select textarea

// 获取元素
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var user = document.querySelector('.user');
var sex = document.querySelector('.sex');

// 获取元素节点的值：
console.log( box.innerText );// 'box标签'
console.log( wrap.innerText );// 'span1 span2 span3'

console.log( box.innerHTML );// 'box标签'
console.log( wrap.innerHTML );
// <span>span1</span>
// <span>span2</span>
// <span>span3</span>

console.log( box.textContent );// 'box标签'
console.log( wrap.textContent );
// span1
// span2
// span3

// dom.innerText 返回元素节点内部的文本（不含标签，不含换行）
// dom.innerHTML 返回元素节点内部的内容（包含标签，包含换行）
// dom.textContent 返回元素节点内部的文本（不含标签，包含换行）

</script>
</body>
</html>